<template>
  <Pages :current="1">
    <view class="page-header">
      <text class="header-title">标签管理</text>
      <CustomButton text="新建标签" @click="handleAddTag" backgroundColor="#409eff" />
    </view>

    <scroll-view class="tags-list" scroll-y :style="{ height: scrollHeight + 'px' }" @refresherrefresh="handleRefresh"
      refresher-enabled :refresher-triggered="refreshing">

      <view v-if="tags.length === 0" class="empty-state">
        <text class="empty-text">暂无标签</text>
      </view>

      <view v-else class="tags-content">
        <view v-for="tag in tags" :key="tag.id" class="tag-item">
          <text class="tag-name">{{ tag.name }}</text>
          <view class="tag-actions">
            <CustomButton text="编辑" @click="handleEditTag(tag)" backgroundColor="#67c23a" />
            <CustomButton text="删除" @click="handleDeleteTag(tag)" backgroundColor="#f56c6c" />
          </view>
        </view>
      </view>
    </scroll-view>

    <TagForm v-if="showForm" :tag="currentTag" @submit="handleSubmitTag" @cancel="handleCancelForm" />
  </Pages>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTagStore } from '@/stores/tags'
import CustomButton from '@/components/CustomButton.vue'
import TagForm from '@/components/tags/TagForm.vue'
import Pages from '@/components/pages/index.vue';

const tagStore = useTagStore()
const showForm = ref(false)
const currentTag = ref(null)
const tags = ref([])
const currentTab = ref(1)

const handleAddTag = () => {
  currentTag.value = null
  showForm.value = true
}

const handleEditTag = (tag) => {
  currentTag.value = tag
  showForm.value = true
}

const handleDeleteTag = (tag) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除该标签吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await tagStore.deleteTag(tag.id)
          // 刷新标签列表
          tags.value = tagStore.tags
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
        } catch (error) {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

const handleCancelForm = () => {
  showForm.value = false
  currentTag.value = null
}

const handleSubmitTag = async (tagData) => {
  try {
    if (currentTag.value) {
      await tagStore.updateTag({ ...currentTag.value, ...tagData })
    } else {
      await tagStore.createTag(tagData)
    }
    showForm.value = false
    currentTag.value = null
  } catch (error) {
    console.error(error)
    uni.showToast({
      title: '保存失败',
      icon: 'none'
    })
  }
}

onMounted(async () => {
  // await tagStore.fetchTags()
  // tags.value = tagStore.tags
  initScrollHeight()
  fetchTagList(true)

})

// 添加分页相关变量
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const refreshing = ref(false)
const loading = ref(false)
const scrollHeight = ref(0)

// 添加获取标签列表方法
const fetchTagList = async (isRefresh = false) => {
  console.log('fetchTagList', isRefresh)
  if (isRefresh) {
    page.value = 1
    hasMore.value = true
  }

  if (!hasMore.value || (loading.value && !isRefresh)) return

  loading.value = true
  try {
    await tagStore.fetchTags()
    tags.value = tagStore.tags

  } catch (error) {
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
    if (isRefresh) {
      refreshing.value = false
    }
  }
}

// 添加刷新和加载更多方法
const handleRefresh = async () => {
  refreshing.value = true
  await fetchTagList(true)
}


// 初始化 scroll-view 高度
// 添加状态栏高度变量
const statusBarHeight = ref(0)

// 修改初始化方法
const initScrollHeight = () => {
  const h = 120
  const systemInfo = uni.getSystemInfoSync()
  // #ifdef APP-PLUS
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  scrollHeight.value = systemInfo.windowHeight - h - statusBarHeight.value
  // #endif

  // #ifndef APP-PLUS
  statusBarHeight.value = 20
  scrollHeight.value = systemInfo.windowHeight - h
  // #endif
}

// 修改页面加载初始化
// onMounted(() => {
//   initScrollHeight()
//   fetchTagList(true)
// })
</script>


<style lang="scss" scoped>
:deep(.uni-scroll-view-refresher) {
  background: none !important;
  margin-bottom: 20rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.tags-list {

  .loading-state,
  .empty-state {
    // background: #fff;
    border-radius: 12rpx;
    padding: 48rpx;
    text-align: center;
    color: #909399;
    font-size: 28rpx;
  }

  .loading-state {
    background: transparent;
    margin: 20rpx 0;
  }

  .loading-more,
  .no-more {
    text-align: center;
    padding: 20rpx;
    color: #909399;
    font-size: 24rpx;
  }

  .tags-content {
    .tag-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx;
      margin-bottom: 24rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

      .tag-info {
        .tag-name {
          font-size: 32rpx;
        }

        .tag-category {
          font-size: 24rpx;
          color: #909399;
          margin-left: 16rpx;
        }
      }

      .tag-actions {
        display: flex;
        gap: 16rpx;
      }
    }
  }
}
</style>